<template>
    <view class="conbox g_content">
        <view class="custom" :style="'top:' + customTop + 'px'">
            <view class="back" @click="goBack">
                <u-icon name="arrow-left" color="#ffffff" size="25"></u-icon>
            </view>
            <text>抽奖</text>
            <view></view>
        </view>
        <!--    <image src="@/static/img/bg.png" class="cont" mode=""></image>-->
        <image src="@/static/img/caidai.png" class="caidai" mode=""></image>
        <view :style="'padding-top:' + titleHeight + 'px'">
            <view class="cishu" :style="'top:' + titleHeight + 'px'">次数：{{myInfoVo.numberDraws||0}}</view>
            <view class="container">
                <!-- 背景 -->
                <view class="main" style="padding-top: 50rpx;">
                    <view class="canvas-container">

                        <view :animation="animationData" class="canvas-content" id="zhuanpano" style="">
                            <view class="canvas-line">
                                <view class="canvas-litem" v-for="(item,index) in list" :key="index" :style="{transform:'rotate('+(index * width + width / 2)+'deg)'}"></view>
                            </view>

                            <view class="canvas-list">
                                <view class="canvas-item" :style="{transform: 'rotate('+(index * width)+'deg)', zIndex:index, }" v-for="(iteml,index) in list" :key="index">
                                    <view class="canvas-item-text" :style="'transform:rotate('+(index )+')'">
                                        <text class="b" style="font-size: 32rpx;">{{iteml.configName}}</text>
                                        <image :src="iteml.url" mode="aspectFit" style="width: 100rpx;height: 100rpx;"></image>
                                        <!--                                    <text class="icon-awrad iconfont " :class="iteml.icon"></text>-->
                                    </view>
                                </view>
                            </view>
                        </view>

                        <view @tap="playReward" class="canvas-btn" v-bind:class="btnDisabled">开始</view>
                    </view>
                </view>
                <!-- 规则 -->
                <view class="guize" style="margin-top: 80rpx;">
                    <view class="title">
                        规则说明
                    </view>
                    <rich-text :nodes="lotteryRules" space="ensp" catchtap="catchImage"></rich-text>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
import { getByKeyApi, cjApi } from "@/sheep/api/index";
import { getMyInfoApi } from "@/sheep/api/baseApi";
export default {
    data() {
        return {
            customTop: 0,
            titleHeight: 0,
            lotteryRules: "",
            list: [],
            width: 0,
            animationData: {},
            btnDisabled: "disabled",
            hundredNum: [],
            randomAll: 0,
            randomIndex: 0,
            myInfoVo: {},
        };
    },
    onLoad: function () {},
    onShow() {
        this.getlotteryRules();
        this.getMyInfo();
        this.getaward();
        this.getHeight();
    },
    methods: {
        // 获取微信右上角胶囊高度
        getHeight() {
            let res = uni.getMenuButtonBoundingClientRect();
            this.titleHeight = res.top + res.height + 16;
            this.customTop = res.top + 3;
        },
        getMyInfo() {
            getMyInfoApi().then((res) => {
                this.myInfoVo = res.data;
                if (this.myInfoVo.numberDraws > 0) {
                    this.btnDisabled = "";
                } else {
                    this.btnDisabled = "disabled";
                }
            });
        },
        goBack() {
            uni.navigateBack();
        },
        async getlotteryRules() {
            let res = await getByKeyApi("lotteryRules");
            this.lotteryRules = res.data[0].configValue;
        },
        async getaward() {
            let res = await getByKeyApi("award");
            this.list = res.data;
            if (this.list.length > 0) {
                this.list.forEach((item) => {
                    item.configName = item.configName.split("-")[0];
                });
            }
            // 获取奖品列表
            this.width = 360 / this.list.length;
            if (this.list.length > 0) {
                this.randomAll = 0;
                this.list.forEach((item, index) => {
                    this.randomAll += Number(item.remark);
                });
                for (let i = 1; i <= this.randomAll; i++) {
                    this.hundredNum.push(i);
                }
                this.list.forEach((item, index) => {
                    item.numList = this.hundredNum.splice(0, item.remark);
                });
            }
        },
        animation(index, duration) {
            //中奖index
            var list = this.list;
            // var awardIndex = 1 || Math.round(Math.random() * (awardsNum.length - 1)); //随机数
            var runNum = 4; //旋转8周

            // 旋转角度
            this.runDeg = this.runDeg || 0;
            this.runDeg =
                this.runDeg +
                (360 - (this.runDeg % 360)) +
                (360 * runNum - index * (360 / list.length)) +
                1;
            //创建动画
            var animationRun = uni.createAnimation({
                duration: duration,
                timingFunction: "ease",
            });
            animationRun.rotate(this.runDeg).step();
            this.animationData = animationRun.export();
            this.btnDisabled = "disabled";
        },
        //发起抽奖
        async playReward() {
            if (this.btnDisabled == "disabled") {
                return;
            }
            //生成随机数
            let randomNum = Math.round(Math.random() * this.randomAll);
            let duration = 4000;

            this.list.forEach((item, index) => {
                if (item.numList.includes(randomNum)) {
                    this.randomIndex = index;
                }
            });
            await this.animation(this.randomIndex, duration);
            await this.getReward(duration);

            /*            setTimeout(() => {
                                  uni.showModal({content: this.list[randomIndex].configName=='感谢参与' ? '抱歉，您未中奖' : '恭喜，中奖'})
                                  this.btnDisabled = '';
                                  // document.getElementById('zhuanpano').style=''
                              }, duration + 1000)*/
        },
        getReward(duration) {
            cjApi({
                businessConfigId: this.list[this.randomIndex].businessConfigId,
            }).then((res) => {
                if (res.code == 200) {
                    setTimeout(() => {
                        uni.showModal({
                            content:
                                this.list[this.randomIndex].configName == "感谢参与"
                                    ? "抱歉，您未中奖"
                                    : "恭喜您抽中" + this.list[this.randomIndex].configName,
                        });
                    }, duration + 1000);
                    this.getMyInfo();
                } else {
                    this.btnDisabled = "";
                    uni.showToast({
                        title: res.msg,
                        icon: "none",
                    });
                }
            });
        },
    },
};
</script>
<style scoped>
.custom {
    position: absolute;
    width: 100%;
    left: 50%;
    transform: translate(-50%, 0);
    font-size: 40rpx;
    font-weight: bolder;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    z-index: 9;
}
.cishu {
    position: absolute;
    left: 20rpx;
    border: 1px solid #fff;
    color: #fff;
    border-radius: 20rpx;
    padding: 10rpx 20rpx;
    z-index: 999;
}
.icon-awrad {
    font-size: 50rpx !important;
}

.conbox {
    width: 750rpx;
    height: 100vh;
    overflow-x: hidden;
    overflow-y: scroll;
}

.container,
image.cont {
    width: 750rpx;
    min-height: 80vh;
    height: auto;
    position: relative;
}

image.cont {
    height: 100%;
    position: absolute;
    z-index: 0;
}

image.caidai {
    position: absolute;
    top: 0;
    left: 0;
    width: 750rpx;
    height: 1024rpx;
}

.header-title > view {
    padding: 8rpx 16rpx;
    border: 1px solid #d89720;
    color: #d89720;
    font-size: 28rpx;
    border-radius: 26rpx;
}

/* 转盘 */
.canvas-container {
    margin: 0 auto;
    position: relative;
    width: 600rpx;
    height: 600rpx;
    background: url(@/static/img/circle.png) no-repeat;
    background-size: cover;
    border-radius: 50%;
}

.canvas-content {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    display: block;
    width: 600rpx;
    height: 600rpx;
    border-radius: inherit;
    /* background-clip: padding-box; */
    /* background-color: #ffcb3f; */
}

.canvas-list {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 9999;
}

.canvas-item {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    color: #e4370e;
    /* text-shadow: 0 1rpx 1rpx rgba(255, 255, 255, 0.6); */
}

.canvas-item-text {
    position: relative;
    display: block;
    padding-top: 46rpx;
    margin: 0 auto;
    text-align: center;
    -webkit-transform-origin: 50% 300rpx;
    transform-origin: 50% 300rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #fb778b;
}

.canvas-item-text text {
    font-size: 30rpx;
}

/* 分隔线 */
.canvas-line {
    position: absolute;
    left: 0;
    top: 0;
    width: inherit;
    height: inherit;
    z-index: 99;
}

.canvas-litem {
    position: absolute;
    left: 300rpx;
    top: 0;
    width: 3rpx;
    height: 300rpx;
    background-color: rgba(228, 55, 14, 0.4);
    overflow: hidden;
    -webkit-transform-origin: 50% 300rpx;
    transform-origin: 50% 300rpx;
}

/**
* 抽奖按钮
*/
.canvas-btn {
    position: absolute;
    left: 260rpx;
    top: 260rpx;
    z-index: 400;
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
    color: #f4e9cc;
    background-color: #e44025;
    line-height: 80rpx;
    text-align: center;
    font-size: 26rpx;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6);
    text-decoration: none;
}

.canvas-btn::after {
    position: absolute;
    display: block;
    content: " ";
    left: 12rpx;
    top: -44rpx;
    width: 0;
    height: 0;
    overflow: hidden;
    border-width: 30rpx;
    border-style: solid;
    border-color: transparent;
    border-bottom-color: #e44025;
}
.canvas-btn.disabled {
    pointer-events: none;
    background: #b07a7b;
    color: #ccc;
}

.canvas-btn.disabled::after {
    border-bottom-color: #b07a7b;
}

.typecheckbox view {
    border: 1px solid #ff3637;
    background: transparent;
    color: #ff3637;
    display: flex;
    height: 60rpx;
    width: 140rpx;
    border-radius: 50rpx;
    align-items: center;
    justify-content: center;
    display: flex;
    margin-left: 20rpx;
}

.guize {
    //width: 502rpx;
    min-height: 300rpx;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 3;
    //background-image: linear-gradient(-180deg, #efa285 0%, #efa285 100%);
    background: #191919;
    border: 10rpx solid #CBB18B;
    border-radius: 16px;
    margin: 0 auto;
    margin-top: -104rpx;
    padding: 48rpx;
    /* box-sizing: border-box; */
    color: #fff;
}

.guize .title {
    text-align: center;
    margin-bottom: 28rpx;
}

.guize .g_item {
    font-family: PingFang-SC-Medium;
    font-size: 24rpx;
    color: #ffffff;
    letter-spacing: 0.5px;
    text-align: justify;
    line-height: 20px;
}

.myrewards .title {
    font-family: PingFang-SC-Bold;
    font-size: 16px;
    color: #e4431a;
    letter-spacing: 0.57px;
    display: flex;
    padding-top: 36rpx;
    justify-content: center;
}
</style>
